import React from "react";
import "./Journey.css";
import switchImg from '../imgs/switch.svg';

export default function Journey(props) {
	const { from, to, exchangeFromTo, showCitySelector } = props;
	return (
		<div className="journey">
            <div
                className="journey-station"
                onClick={()=> showCitySelector(true)}
            >
				<input type="text" readOnly name="from" value={from} className="journey-input journey-from" />
			</div>
            <div className="journey-switch"
                onClick={() => exchangeFromTo()}
            >
                <img src={switchImg} alt="switch" width="70" height="40"/>
            </div>
            <div className="journey-station"
                onClick={()=> showCitySelector(false)}
            >
				<input type="text" readOnly name="to" value={to} className="journey-input journey-to" />
			</div>
		</div>
	);
}
